<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  font-size: 18px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="queryFiteris" :size="size">
        <el-row style="text-align: left;">
          <el-form-item>
            <!-- <el-input v-model="filters.business" placeholder="商家"></el-input> -->
            <el-select v-model="queryFiteris.merchantName" placeholder="商家名称" style="width:200px">
              <el-option label="录屏商家02" value="1">录屏商家02</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
              <el-option label="张小二服饰" value="1">张小二服饰</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- <el-input v-model="filters.type" placeholder="模板分类"></el-input> -->
            <el-select v-model="queryFiteris.status" placeholder="状态" style="width:200px">
              <el-option label="有效" value="0">有效</el-option>
              <el-option label="无效" value="1">无效</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryFiteris.code" placeholder="合同编码" style="width:200px"></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-input v-model="filters.name" placeholder="模板名称" style="width:200px"></el-input>
          </el-form-item> -->

          <el-form-item>
            <el-date-picker
              v-model="queryFiteris.startTimeStartDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="合同生效时间起"
              style="width:200px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="queryFiteris.startTimeEndDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="合同生效时间止"
              style="width:200px"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row style="text-align: left;">
          <el-form-item>
            <el-input v-model="queryFiteris.supplierCode" placeholder="供应商编码" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryFiteris.supplierName" placeholder="供应商名称" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-input v-model="filters.type" placeholder="模板分类"></el-input> -->
            <el-select v-model="queryFiteris.type" placeholder="合同属性" style="width:200px">
              <el-option label="自采合同" value="0">自采合同</el-option>
              <!-- <el-option label="分签分付" value="1">分签分付</el-option>
              <el-option label="自采合同" value="1">自采合同</el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="queryFiteris.endTimeStartDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="合同失效时间起"
              style="width:200px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="queryFiteris.endTimeEndDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="合同失效时间止"
              style="width:200px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(dataForm)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh" :label="$t('action.reset')"
              @click="reset"
              type="primary"
            />
          </el-form-item>
        </el-row>

        <el-row style="text-align: left;">
          <el-form-item>
            <kt-button
              icon="fa fa-plus"
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="导出" @click="confim" type="primary" />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="重启" @click="confim" type="primary" />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="续签" @click="confim" type="primary" />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="延期" @click="confim" type="primary" />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="变更" @click="confim" type="primary" />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-pencil" label="审核" @click="confim" type="primary" />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-hand-pointer-o" label="暂停" @click="confim" type="primary" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <CyTable
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      @findPage="findPage"
      @handleDelete="handleDelete"
      @handleEdit="handleDetail"
      ref="CyTable"
    ></CyTable>

    <!--新增编辑界面-->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="35%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="60px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>

        <el-row>
          <el-form-item label="供应商编码" prop="number">
            <el-input v-model="dataForm.number" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="供应商名称" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row style="text-align:center">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(filters)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh" :label="$t('action.reset')"
              @click="reset"
              type="primary"
            />
          </el-form-item>
        </el-row>
        <template>
          <el-table :data="tableData" border style="width: 100%" tooltip-effect="dark" @selection-change="handleSelectionChange">>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="suppliernumber" label="供应商编码"></el-table-column>
            <el-table-column prop="suppliername" label="供应商名称"></el-table-column>
          </el-table>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="addContract()" type="primary">确认</el-button>
        <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>

    <!--合同详情页面-->
    <el-dialog
      :title="operation?'详情':'详情'"
      width="85%"
      :visible.sync="detailpage"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="120px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>

        <el-row>
          <el-col :span="8">
            <el-form-item label="合同名称:" prop="name" >
              <el-input v-model="dataForm.name" required></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="业务类型:" prop="busiType">
              <el-select placeholder="请选择" v-model="dataForm.busiType" size="mini">
                <el-option label="采购单" :value="1"></el-option>
                <el-option label="代销单" :value="2"></el-option>
                <el-option label="经销单" :value="3" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="业务编码:" prop="busiCode">
              <el-input v-model="dataForm.busiCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="合同编码:" prop="code">
               <el-input v-model="dataForm.code"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="商家编码:" prop="merchantCode">
              <el-input v-model="dataForm.merchantCode"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="商家名称:" prop="merchantName">
              <el-input v-model="dataForm.merchantName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="合同属性:" prop="type">
              <el-select placeholder="请选择" v-model="dataForm.type" size="mini">
                <el-option label="自采合同" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="生效开始时间:" prop="startTime">
              <el-date-picker
              v-model="dataForm.startTime"
              type="date"
              placeholder="生效开始时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="生效结束时间:" prop="endTime">
              <el-date-picker
              v-model="dataForm.endTime"
              type="date"
              placeholder="生效结束时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="交易币别" prop="tradeCurrency">
              <el-select placeholder="请选择" v-model="dataForm.tradeCurrency" size="mini">
                <el-option label="人名币" :value=CNY></el-option>
                <el-option label="美元" :value="USD"></el-option>
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-select placeholder="请选择" v-model="dataForm.status" size="mini">
                <el-option label="有效" :value=0></el-option>
                <el-option label="无效" :value=1></el-option>
              </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商编码" prop="supplierCode">
            <el-input v-model="dataForm.supplierCode" :disabled="true"></el-input>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商名称" prop="supplierName">
            <el-input v-model="dataForm.supplierName" :disabled="true"></el-input>
          </el-form-item>
          </el-col>
        </el-row>

        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <!-- 基本信息 -->
            <el-tab-pane label="基本信息" name="1">
              <el-row>
                <el-checkbox v-model="checked" @change="onchange">外贸合同</el-checkbox>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="生效日期" prop="number">
                    <el-date-picker
                      v-model="filters.startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="生效日期"
                      style="width:200px"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="失效日期" prop="remark">
                    <el-date-picker
                      v-model="filters.startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="失效日期"
                      style="width:200px"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-checkbox v-model="checked1" @change="onchangeType">指定合同商品类目</el-checkbox>
              </el-row>
              <!-- 财务信息 -->
              <el-divider></el-divider>
              <el-row>
                <el-span>财务信息</el-span>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="结算方式" prop="number">
                    <el-select style="width:200px">
                      <el-option label="账期结算" value="1">账期结算</el-option>
                      <el-option label="账期结算" value="1">账期结算</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="付款账期" prop="number">
                    <el-select style="width:200px">
                      <el-option label="日账期" value="1">日账期</el-option>
                      <el-option label="月账期" value="1">月账期</el-option>
                      <el-option label="年账期" value="1">年账期</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="支持开票" prop="number">
                    <el-radio v-model="radio" label="1">允许</el-radio>
                    <el-radio v-model="radio" label="2">不允许</el-radio>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="支持专票" prop="number">
                    <el-radio v-model="radio" label="3">备选项</el-radio>
                    <el-radio v-model="radio" label="4">不允许</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 外贸信息 -->
              <el-row v-if="foreignTrade" style="text-align:center">
                <el-divider></el-divider>
                <el-row style="text-align:left">
                  <el-span>外贸信息</el-span>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="结算货币" prop="number">
                      <el-select style="width:200px">
                        <el-option label="账期结算" value="1">账期结算</el-option>
                        <el-option label="账期结算" value="1">账期结算</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="贸易方式" prop="number">
                      <el-select style="width:200px">
                        <el-option label="日账期" value="1">日账期</el-option>
                        <el-option label="月账期" value="1">月账期</el-option>
                        <el-option label="年账期" value="1">年账期</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="成交方式" prop="number">
                      <el-select style="width:200px">
                        <el-option label="工厂交货（EXW）" value="1">工厂交货（EXW）</el-option>
                        <el-option label="边境交货(DAF)" value="1">边境交货(DAF)</el-option>
                        <el-option label="目的港船上交货(DES)" value="1">目的港船上交货(DES)</el-option>
                        <el-option label="目的港码头交货(DEQ)" value="1">目的港码头交货(DEQ)</el-option>
                        <el-option label="未完税交货(DDU)" value="1">未完税交货(DDU)</el-option>
                        <el-option label="完税后交货(DDP)" value="1">完税后交货(DDP)</el-option>
                        <el-option label="货交承运人（FCA）" value="1">货交承运人（FCA）</el-option>
                        <el-option label="船边交货（FAS)" value="1">船边交货（FAS)</el-option>
                        <el-option label="船上交货（FOB）" value="1">船上交货（FOB）</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="运输方式" prop="number">
                      <el-select style="width:200px">
                        <el-option label="海运" value="1">海运</el-option>
                        <el-option label="多式联运" value="1">多式联运</el-option>
                        <el-option label="空运" value="1">空运</el-option>
                        <el-option label="铁路" value="1">铁路</el-option>
                        <el-option label="公路" value="1">公路</el-option>
                        <el-option label="内河" value="1">内河</el-option>
                        <el-option label="专递或邮寄" value="1">专递或邮寄</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="装运港" prop="number">
                      <el-select style="width:200px">
                        <el-option label="账期结算" value="1">账期结算</el-option>
                        <el-option label="账期结算" value="1">账期结算</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="抵运港" prop="number">
                      <el-select style="width:200px">
                        <el-option label="日账期" value="1">日账期</el-option>
                        <el-option label="月账期" value="1">月账期</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-row>

              <el-row v-if="types" style="text-align:center">
                <el-divider></el-divider>
                <el-row style="text-align:left">
                  <el-span>商品类目</el-span>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="a">营养辅食</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="b">母婴用品</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="d">早教玩具</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="c">食品</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="a">臻选图书</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="b">宝宝日用</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="d">箱包</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-checkbox v-model="c">化妆品</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-row>

              <el-row>
                <el-form-item label="备注" prop="remark">
                  <el-input type="textarea" v-model="filters.remark" style="width:1000px"></el-input>
                </el-form-item>
              </el-row>
              <el-row style="text-align:center">
                <el-form-item>
                  <kt-button
                    icon="fa fa-save"
                    label="保存"
                    type="primary"
                    @click="findPage(filters)"
                  />
                </el-form-item>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="费用信息" name="2">
              <el-button :size="size" @click="confim" type="primary">删除所选费用类型</el-button>
              <el-button :size="size" @click="addprice" type="primary">添加费用类型</el-button>

              <template>
                <el-table :data="tableDataprice" border style="width: 100%">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="1" label="费用类型编码" width="180"></el-table-column>
                  <el-table-column prop="2" label="费用类型名称" width="180"></el-table-column>
                  <el-table-column prop="3" label="计费周期"></el-table-column>
                  <el-table-column prop="4" label="计费基准"></el-table-column>
                  <el-table-column prop="5" label="计费方式"></el-table-column>
                  <el-table-column prop="6" label="生成费用单方式"></el-table-column>
                  <el-table-column prop="7" label="审核方式"></el-table-column>
                  <el-table-column prop="8" label="是否设置保底金额"></el-table-column>
                  <el-table-column prop="9" label="保底金额"></el-table-column>
                  <el-table-column prop="10" label="费用金额(元)"></el-table-column>
                  <el-table-column prop="11" label="计费比率"></el-table-column>
                  <el-table-column prop="12" label="	备注"></el-table-column>
                  <el-table-column prop="13" label="	阶梯费用"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="合同附件" name="3">
              <el-button :size="size" @click="uploadfile" type="primary">上传合同附件</el-button>
              <el-button :size="size" @click="handleDelete" type="primary">删除</el-button>
              <template>
                <el-table :data="tableDataslave" border style="width: 100%">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="1" label="合同附件" width="180"></el-table-column>
                  <el-table-column prop="2" label="上载人" width="180"></el-table-column>
                  <el-table-column prop="3" label="时间"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="查看合同协议" name="4">
              <el-button :size="size" @click="addprotocol" type="primary">新增合同模板</el-button>
              <template>
                <el-table :data="tableDataprotocol" border style="width: 100%">
                  <el-table-column prop="1" label="合同类型" width="180"></el-table-column>
                  <el-table-column prop="2" label="模板编号" width="180"></el-table-column>
                  <el-table-column prop="3" label="版本号"></el-table-column>
                  <el-table-column prop="4" label="模板名称"></el-table-column>
                  <el-table-column prop="5" label="模板附件"></el-table-column>
                  <el-table-column prop="6" label="上载人"></el-table-column>
                  <el-table-column prop="7" label="上载时间"></el-table-column>
                  <el-table-column prop="8" label="备注"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button @click="addprotocol" type="text" size="small">编辑</el-button>
                      <el-button type="text" size="small" @click="handleDelete">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="操作日志" name="5">
              <template>
                <el-table :data="tableDatapeople" border style="width: 100%">
                  <el-table-column prop="1" label="操作用户ID" width="180"></el-table-column>
                  <el-table-column prop="2" label="操作人" width="180"></el-table-column>
                  <el-table-column prop="3" label="操作时间"></el-table-column>
                  <el-table-column prop="4" label="操作"></el-table-column>
                  <el-table-column prop="5" label="备注"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="联系人" name="6">
              <el-button :size="size" @click="addlink" type="primary">新增联系人</el-button>
              <template>
                <el-table :data="tableDatalink" border style="width: 100%">
                  <el-table-column prop="1" label="联系人" width="180"></el-table-column>
                  <el-table-column prop="2" label="联系人职位" width="180"></el-table-column>
                  <el-table-column prop="3" label="联系人固定电话"></el-table-column>
                  <el-table-column prop="4" label="联系人手机"></el-table-column>
                  <el-table-column prop="5" label="联系人Email"></el-table-column>
                  <el-table-column prop="6" label="联系地址"></el-table-column>
                  <el-table-column prop="7" label="主要联系人"></el-table-column>
                  <el-table-column prop="8" label="备注"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button @click="handleDelete" type="text" size="small">删除</el-button>
                      <el-button type="text" size="small" @click="editLink">编辑</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane label="店铺信息" name="7">
              <el-button :size="size" @click="addshop" type="primary">添加店铺组织</el-button>
              <template>
                <el-table :data="tableDatashop" border style="width: 100%">
                  <el-table-column prop="1" label="店铺编码" width="180"></el-table-column>
                  <el-table-column prop="2" label="店铺名称" width="180"></el-table-column>
                  <el-table-column prop="3" label="店铺类型"></el-table-column>
                  <el-table-column prop="4" label="店铺地址"></el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button @click="handleDelete" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
          </el-tabs>
        </template>
        <!-- <el-row style="text-align:center">
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				
        </el-row>-->
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="updateContract" type="primary">确认</el-button>
        <!-- <el-button :size="size" @click="deleteinfo" type="primary">删除</el-button> -->
        <el-button :size="size" @click.native="detailpage = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!-- 添加费用弹框 -->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="35%"
      :visible.sync="priceModal"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="80px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>

        <el-row>
          <el-form-item label="一级费用类型" prop="number">
            <!-- <el-input v-model="dataForm.number"  auto-complete="off"></el-input> -->
            <el-select>
              <el-option label="一级费用类型">一级费用类型</el-option>
              <el-option label="一级费用类型">一级费用类型</el-option>
              <el-option label="一级费用类型">一级费用类型</el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="计费周期" prop="remark">
            <el-select>
              <el-option label="按月">按月</el-option>
              <el-option label="按季度">按季度</el-option>
              <el-option label="按年">按年</el-option>
              <el-option label="一次性费用">一次性费用</el-option>
              <el-option label="手动创建">手动创建</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费方式" prop="remark">
            <el-select>
              <el-option label="固定比例">固定比例</el-option>
              <el-option label="固定金额">固定金额</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费基准" prop="remark">
            <el-select>
              <el-option label="销售额">销售额</el-option>
              <el-option label="销售成本">销售成本</el-option>
              <el-option label="进退货金额">进退货金额</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生成费用单方式" prop="remark">
            <el-select>
              <el-option label="自动生成">自动生成</el-option>
              <el-option label="手动生成">手动生成</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核方式" prop="remark">
            <el-select>
              <el-option label="自动审核">自动审核</el-option>
              <el-option label="手动审核">手动审核</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费比率" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="设置保底金额" prop="remark">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="confim" type="primary">确认</el-button>
        <el-button :size="size" @click.native="priceModal = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!-- 上传弹框 -->
    <el-dialog
      title="上传合同附件"
      width="35%"
      :visible.sync="uploadModal"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="80px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-row>
          <el-form-item label="请选择">
            <el-input type="file"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="confim" type="primary">确认</el-button>
        <el-button :size="size" @click.native="uploadModal = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!-- 合同模板 -->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="65%"
      :visible.sync="condialogVisible"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="80px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>

        <el-row>
          <el-form-item label="模板编号" prop="number">
            <el-input v-model="dataForm.number" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="商家" prop="business">
            <!-- <el-input v-model="dataForm.business"  auto-complete="off" ></el-input> -->
            <el-select v-model="dataForm.business" placeholder="商家">
              <el-option label="录屏商家02" value="1">录屏商家02</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
              <el-option label="张小二服饰" value="1">张小二服饰</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板分类" prop="type">
            <el-input v-model="dataForm.type" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="模板名称" prop="name">
            <el-input v-model="dataForm.remains" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="模板附件" prop="template">
            <el-input v-model="dataForm.template" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row></el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="condialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
    <!-- 联系人弹框 -->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="65%"
      :visible.sync="linkerModal"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="80px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>

        <el-row>
          <el-form-item label="联系人" prop="number">
            <el-input v-model="dataForm.number" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="联系人职位" prop="business">
            <el-input v-model="dataForm.business" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系人固定电话" prop="type">
            <el-input v-model="dataForm.type" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系人Email" prop="name">
            <el-input v-model="dataForm.remains" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系地址" prop="template">
            <el-input v-model="dataForm.template" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row></el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="linkerModal = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
    <!-- 店铺弹框 -->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="45%"
      :visible.sync="shopModal"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="100px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>

        <el-row>
          <el-form-item label="供应商编码" prop="number">
            <el-input v-model="dataForm.number" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="供应商名称" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row style="text-align:center">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(filters)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh" :label="$t('action.reset')"
              @click="reset"
              type="primary"
            />
          </el-form-item>
        </el-row>
        <template>
          <el-table :data="tableDatashopmodal" border style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="business" label="商家名称"></el-table-column>
            <el-table-column prop="shopname" label="店铺编码"></el-table-column>
            <el-table-column prop="shopname" label="店铺编码"></el-table-column>
            <el-table-column prop="shoptype" label="店铺类型"></el-table-column>
          </el-table>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="confim" type="primary">提交</el-button>
        <el-button :size="size" @click.native="shopModal = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import XLSX from "xlsx";
import axios from "axios";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      excelup: this.utils.getUpLoadHost(),
      size: "small",
      radio: "1",
      foreignTrade: false,
      types: false,
      shopModal: false,
      linkerModal: false,
      priceModal: false,
      checked: false,
      condialogVisible: false,
      uploadModal: false,
      checked1: false,
      document_license: "",
      activeName: "second",
      multipleSelection: [],
      filters: {
        name: "",
        res: {
          total:0,
          code: "0000",
          rows: [
            // {
            //   number: "20190922150928",
            //   business: "张小二服饰",
            //   contractattributes: "自采合同",
            //   tradingcurrency: "CNY",
            //   invalid: "无效",
            //   suppliernumber: "1911290006883258",
            //   suppliername: "美元供应商",
            //   effectivetime: "2019-10-11",
            //   timefailure: "2019-11-1",
            //   type: "正常合同",
            //   status: "暂停",
            //   numbered: "HT1910110000055740",
            //   creator: "13875977921"
            // },
            // {
            //   number: "20190922150928",
            //   business: "张小二服饰",
            //   contractattributes: "自采合同",
            //   tradingcurrency: "CNY",
            //   invalid: "无效",
            //   suppliernumber: "1911290006883258",
            //   suppliername: "美元供应商",
            //   effectivetime: "2019-10-11",
            //   timefailure: "2019-11-1",
            //   type: "正常合同",
            //   status: "暂停",
            //   numbered: "HT1910110000055740",
            //   creator: "13875977921"
            // },
            // {
            //   number: "20190922150928",
            //   business: "张小二服饰",
            //   contractattributes: "自采合同",
            //   tradingcurrency: "CNY",
            //   invalid: "无效",
            //   suppliernumber: "1911290006883258",
            //   suppliername: "美元供应商",
            //   effectivetime: "2019-10-11",
            //   timefailure: "2019-11-1",
            //   type: "正常合同",
            //   status: "暂停",
            //   numbered: "HT1910110000055740",
            //   creator: "13875977921"
            // }
          ],
        }
      },
      tableDataprice: [
        {
          1: "001",
          2: "三A费用类型",
          3: "按月",
          4: "销售额",
          5: "固定比例",
          6: "自动生成",
          7: "自动审核",
          8: "是",
          9: "111.00",
          10: "0.00",
          11: "0",
          12: "否",
          13: "否"
        }
      ],
      tableDataprotocol: [
        {
          1: "经销合同",
          2: "20190917155550",
          3: "V1",
          4: "经销合同模板",
          5: " 3.jpg",
          6: "merchant",
          7: "2019-09-17 15:55:50",
          8: "是"
        }
      ],
      tableDatapeople: [
        {
          1: "19090215374897",
          2: "superadmin",
          3: "2019-12-25 14:46:19",
          4: "添加合同原件",
          5: "是"
        },
        {
          1: "19090215374897",
          2: "superadmin",
          3: "2019-12-25 14:46:19",
          4: "添加合同原件",
          5: "是"
        },
        {
          1: "19090215374897",
          2: "superadmin",
          3: "2019-12-25 14:46:19",
          4: "添加合同原件",
          5: "是"
        }
      ],
      tableDatalink: [
        {
          1: "李四",
          2: "总经理",
          3: "13678945621",
          4: "13678945621",
          5: "13678945621@163.com",
          6: "上海美术学院",
          7: "张三"
        },
        {
          1: "李四",
          2: "总经理",
          3: "13678945621",
          4: "13678945621",
          5: "13678945621@163.com",
          6: "上海美术学院",
          7: "张三"
        },
        {
          1: "李四",
          2: "总经理",
          3: "13678945621",
          4: "13678945621",
          5: "13678945621@163.com",
          6: "上海美术学院",
          7: "张三"
        }
      ],
      tableDatashop: [
        {
          1: "jd_001",
          2: "京东店",
          3: "直营店",
          4: "上海美术学院"
        },
        {
          1: "jd_001",
          2: "京东店",
          3: "直营店",
          4: "上海美术学院"
        },
        {
          1: "jd_001",
          2: "京东店",
          3: "直营店",
          4: "上海美术学院"
        }
      ],
      tableDatashopmodal: [
        {
          business: "张小二服饰",
          shopnumber: "d_001",
          shopname: "京东店",
          shoptype: "	线上店铺"
        },
        {
          business: "张小二服饰",
          property: "d_001",
          shopname: "京东店",
          shoptype: "	线上店铺"
        },
        {
          business: "张小二服饰",
          property: "d_001",
          shopname: "京东店",
          shoptype: "	线上店铺"
        }
      ],
      value: 0,
      columns: [],
      tabJson: "",

      warehouselist: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      dialogImageUrl: "",

      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      printPage: false,
      dialogVisibleImage: false,
      detailpage: false,
      dataFormRules: {
        name:[ 
        { required: true, message: "请输入合同名称", trigger: "blur" }, 
        ], 
        busiType:[ 
        { required: true, message: "请输入业务类型", trigger: "blur" }, 
        ], 
        busiCode:[ 
        { required: true, message: "请输入业务编码；", trigger: "blur" }, 
        ], 
        code:[ 
        { required: true, message: "请输入合同编码", trigger: "blur" }, 
        ], 
        merchantCode:[ 
        { required: true, message: "请输入商家编码（采购单位）", trigger: "blur" }, 
        ], 
        merchantName:[ 
        { required: true, message: "请输入商家名称", trigger: "blur" }, 
        ], 
        type:[ 
        { required: true, message: "请输入合同属性", trigger: "blur" }, 
        ], 
        startTime:[ 
        { required: true, message: "请输入生效开始时间；", trigger: "blur" }, 
        ], 
        endTime:[ 
        { required: true, message: "请输入生效结束时间；", trigger: "blur" }, 
        ], 
        tradeCurrency:[ 
        { required: true, message: "请输入交易币别", trigger: "blur" }, 
        ], 
        status:[ 
        { required: true, message: "请输入状态", trigger: "blur" }, 
        ], 
      },
      dataForm: {
        id:null,
        name:null,
        busiType:null,
        busiCode:null,
        code:null,
        merchantCode:null,
        merchantName:null,
        type:null,
        startTime:null,
        endTime:null,
        createTime:null,
        creater:null,
        tradeCurrency:null,
        status:null,
        supplierCode:null,
        supplierName:null,
      },
      queryFiteris: {
        id:null,
        name:null,
        busiType:null,
        busiCode:null,
        code:null,
        merchantCode:null,
        merchantName:null,
        type:null,
        startTime:null,
        endTime:null,
        createTime:null,
        creater:null,
        tradeCurrency:null,
        status:null,
        supplierCode:null,
        supplierName:null,
      },
      deptData: [],
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: [],
      searchFilters:{},

      tableData: [
        {
          number: "20190922150928",
          business: "张小二服饰",
          contractattributes: "自采合同",
          tradingcurrency: "CNY",
          invalid: "无效",
          suppliernumber: "1911290006883258",
          suppliername: "美元供应商",
          effectivetime: "2019-10-11",
          timefailure: "2019-11-1",
          type: "正常合同",
          status: "暂停",
          numbered: "HT1910110000055740",
          creator: "13875977921"
        },
        {
          number: "20190922150928",
          business: "张小二服饰",
          contractattributes: "自采合同",
          tradingcurrency: "CNY",
          invalid: "无效",
          suppliernumber: "1911290006883258",
          suppliername: "美元供应商",
          effectivetime: "2019-10-11",
          timefailure: "2019-11-1",
          type: "正常合同",
          status: "暂停",
          numbered: "HT1910110000055740",
          creator: "13875977921"
        },
        {
          number: "20190922150928",
          business: "张小二服饰",
          contractattributes: "自采合同",
          tradingcurrency: "CNY",
          invalid: "无效",
          suppliernumber: "1911290006883258",
          suppliername: "美元供应商",
          effectivetime: "2019-10-11",
          timefailure: "2019-11-1",
          type: "正常合同",
          status: "暂停",
          numbered: "HT1910110000055740",
          creator: "13875977921"
        },
        {
          number: "20190922150928",
          business: "张小二服饰",
          contractattributes: "自采合同",
          tradingcurrency: "CNY",
          invalid: "无效",
          suppliernumber: "1911290006883258",
          suppliername: "美元供应商",
          effectivetime: "2019-10-11",
          timefailure: "2019-11-1",
          type: "正常合同",
          status: "暂停",
          numbered: "HT1910110000055740",
          creator: "13875977921"
        }
      ]
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      // this.$refs.CyTable.findPageStaticState(this.filters);
      let this_ = this;
      if (this_.queryFiteris === undefined || this_.queryFiteris === null) {
        this_.queryFiteris = {};
      }
      // this_.dataForm.pageNum = data === null || data === undefined ? this.pageRequest.pageNum : data;
      this_.queryFiteris.pageSize = this.pageRequest.pageSize;
      this_.queryFiteris.pageNum = this.pageRequest.pageNum;
      this.utils.request.findPurchaseContractPage(this_.queryFiteris, function (res) {
      if (res.code === "0000") {
        this_.filters.res.rows = res.data.rows;
        this_.filters.res.total=res.data.total;
        console.log(res.data)
        console.log(this_.tableData)
        // this_.totalSize = Number(res.data.total);
        this_.$refs.CyTable.findPageStaticState(this_.filters);
      } else {
          this_.tableData = [];
          this_.totalSize = 0;
      }
      });
    },
    addshop() {
      this.shopModal = true;
    },
    editLink() {
      this.linkerModal = true;
    },
    addlink() {
      this.linkerModal = true;
    },
    //合同模板新增
    addprotocol() {
      this.condialogVisible = true;
    },
    //上传
    uploadfile() {
      this.uploadModal = true;
    },
    //费用信息新增
    addprice() {
      this.priceModal = true;
    },
    onchange(data) {
      if (data == true) {
        this.foreignTrade = true;
      } else {
        this.foreignTrade = false;
      }
    },
    onchangeType(data) {
      if (data == true) {
        this.types = true;
      } else {
        this.types = false;
      }
    },
    confim() {
      this.detailpage = false;
      this.dataForm={};
      this.$message({ message: "操作成功", type: "success" });
    },
    handleDetail(params) {
      let this_=this;
      this_.detailpage = true;
      this_.utils.request.getPurchaseContractDetail({id:params.row.id}, function (res) {
        if (res.code === "0000") {
          this_.dataForm = res.data;
        } else {
          this_.$message({message: "操作失败, " + data.msg, type: "error"});
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    //弹窗关闭方法
    handleClose() {
      this.$refs.dataForm.resetFields();
    },
    detailed() {
      this.$router.push({ path: "/Paje/DetailedMsg" });
    },
    //导出
    download() {
      this.$router.push({ path: "/Paje/DetailedMsg" });
    },
    // 批量删除
    handleDelete: function(data) {
      var ids='';
      for(var i=0;i<data.params.length;i++){
        ids=ids+data.params[i].id+',';
      }
      data.ids=ids
      this.utils.request.deletePurchaseContract(data,this.deleteInfoBack)
    }, 
    //删除callback
    deleteInfoBack(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败, ", type: "error" });
      }
      this.findPage();
    },

    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "库存盘点";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    },
    // 显示新增界面
    handleAdd: function() {
      this.dialogVisible = true;
      this.operation = true;
      this.dataForm.id = "";
      //this.dataForm={};
      if (this.$refs["dataForm"] != undefined) {
        this.$refs["dataForm"].resetFields();
      }
      this.dataForm.document_license = "";
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    // 新增合同
    addContract: function() {
      var selected= this.multipleSelection;
      if(selected.length>1){
        this.$message({ message: "请选择单挑数据", type: "error" });
        return;
      }else{
        let params={};
        params.supplierCode=selected[0].suppliernumber,
        params.supplierName=selected[0].suppliername,
        params.deleteFlag=0;
        params.busiType=1;
        this.utils.request.addPurchaseContractInfo(params,this.editInfoBack)
      }
    },
    // 打印
    print: function() {
      this.printPage = true;
      this.operation = true;
    },
    reset: function() {
      this.queryFiteris= {};
      this.findPage(null);
    },

    // 显示编辑界面
    handleEdit: function(params) {
      console.log(params);
      this.dialogVisible = true;
      this.operation = false;
      var this_ = this;
      this.$nextTick(function() {
        this_.dataForm = Object.assign({}, params);
      });
      // var search={};
      // search.id=params.row.id
      // search.t="chargeCard";

      // this.utils.request.queryUserInfo(search,function(res){

      //     if(res.code == "0000"){
      // 		}else{
      // 			this_.$message({message: '获取产品信息异常', type: 'error'});
      // 		}

      // })
    },
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            // 	                    var this_ = this;
            //                         this.editLoading = true
            //                         let params = Object.assign({}, this.dataForm)
            //                         params.t='chargeCard';
            //                         this.utils.request.editUserInfo(params,this.editInfoBack)
            this.$message({ message: "操作成功", type: "success" });
            this.dialogVisible = false;
          });
        }
      });
    }, 
    // 编辑
    updateContract: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            var this_ = this;
            this_.editLoading = true
            let params = Object.assign({}, this.dataForm)
            this_.utils.request.editPurchaseContractInfo(params,this.editInfoBack)
          });
        }
      });
    }, 
    // 新增修改回调
    editInfoBack: function(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败", type: "error" });
      }
      this.detailpage = false;
      this.findPage();
      this.dialogVisible = false;
      this.operation = false;
      this.editLoading = false;
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      let temp = [];
      this.columns = [
        // { prop: "number", label: "合同编码", minWidth: 120 },
        // { prop: "business", label: "商家名", minWidth: 120 },
        // { prop: "contractattributes", label: "合同属", minWidth: 120 },
        // { prop: "tradingcurrency", label: "交易币别", minWidth: 120 },
        // { prop: "invalid", label: "是否失效", minWidth: 120 },
        // { prop: "suppliernumber", label: "供应商编码", minWidth: 120 },
        // { prop: "suppliername", label: "供应商名称", minWidth: 120 },
        // { prop: "effectivetime", label: "合同生效时间", minWidth: 120 },
        // { prop: "timefailure", label: "合同失效时间", minWidth: 120 },
        // { prop: "type", label: "合同变更", minWidth: 120 },
        // { prop: "status", label: "履行状态", minWidth: 120 },
        // { prop: "numbered", label: "原合同编号", minWidth: 120 },
        // { prop: "creator", label: "制单人", minWidth: 120 }
        { prop: "name", label: "合同名称", minWidth: 120 },
        { prop: "supplierCode", label: "供应商编码", minWidth: 120 },
        { prop: "supplierName", label: "供应商名称", minWidth: 120 },
        { prop: "busiType", label: "业务类型", minWidth: 120 },
        { prop: "busiCode", label: "业务编码", minWidth: 120 },
        { prop: "code", label: "合同编码", minWidth: 120 },
        { prop: "merchantCode", label: "商家编码", minWidth: 120 },
        { prop: "merchantName", label: "商家名称", minWidth: 120 },
        { prop: "type", label: "合同属性", minWidth: 120 },
        { prop: "startTime", label: "生效开始时间", minWidth: 120 },
        { prop: "endTime", label: "生效结束时间", minWidth: 120 },
        { prop: "tradeCurrency", label: "交易币别", minWidth: 120 },
        { prop: "status", label: "状态", minWidth: 120 },
        { prop: "createTime", label: "制单时间", minWidth: 120 },
        { prop: "creator", label: "制单人", minWidth: 120 }
      ];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    }
  },
  mounted() {
    this.initColumns();
    this.findPage(null);
  }
};
</script>

<style scoped>
/deep/ .el-input__inner  {
      width: 200px;
}
 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item  {
      margin-bottom: 10px;
}
</style>